<template>
  <div class="lssc">
    <div v-for="(item, index) in lsscList" :key="index" class="lsscitem" :class="{ active: activeTab == item.label }" @click="onClickRow(item.label)">
      <div class="title">
        <div class="wz">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const activeTab = ref('户籍人口');
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { szxc_rylb } = toRefs<any>(proxy?.useDict('szxc_rylb'));
const emit = defineEmits(['handleRylb']);
const lsscList = ref<any>([]);
const onClickRow = (item) => {
  // if (activeTab.value == item) {
  //   activeTab.value = '';
  // } else {
  activeTab.value = item;
  emit('handleRylb', activeTab.value);
  // }
};
watch(
  () => szxc_rylb.value,
  (value) => {
    lsscList.value = value;
    console.log('lsscList.value', lsscList.value);
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.lssc {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 14px 32px 10px 32px;
  flex-wrap: wrap;
  .lsscitem {
    display: flex;
    width: 50%;
    cursor: pointer;
    flex-direction: column;
    .title {
      font-weight: 600;
      margin-left: 4px;
      .wz {
        font-family: 'DingTalk';
        font-weight: 400;
        font-size: 24px;
        background: linear-gradient(0deg, #4ab1ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }
    &.active {
      scale: 1.1;
      .wz {
        font-weight: 600;
        background: linear-gradient(0deg, #00908e 0%, #33ff99 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
